<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jq-1.12.4.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>

<body>
    <div id="app" class="container">
        <ul class="pagination">
        </ul>
    </div>
</body>
<script>
    let options = {
        pagenum: 1,
        total: 8,
        pagesize: 5,
        query: ''
    }
    $(function () {
        appendPagenum()
    })
    function appendPagenum() {
        $('.pagination').empty()
        firstLi = $(`<li class="disabled"><a href="#">&laquo;</a></li>`)
        lastLi = $(`<li><a href="#">&raquo;</a></li>`)
        $('.pagination').append(firstLi)
        $('.pagination').append(lastLi)
        for (let i = 0; i < options.total; i++) {
            let li = `<li><a href="#">${i + 1}</a></li>`
            if (i + 1 === options.pagenum) {
                li = `<li class='active'><a href="#">${i + 1}</a></li>`
            }
            lastLi.before(li)
        }
        $(".pagination li").not(':first').not(':last').click(function () {
            $(this).siblings().removeClass("active").end().addClass('active')
            let num = parseInt($(this).find('a').html())
            console.log(num)
            options.pagenum = num
            if (num > 1) {
                firstLi.removeClass('disabled')
            } else {
                firstLi.addClass('disabled')
            }
        })
        firstLi.click(function () {
            let num = options.pagenum
            num--
            if (num < 1) {
                num = 1
            }
            options.pagenum
            appendPagenum()
        })
    }
</script>

</html>